<template>
	<view>
		<view class='productList' style="padding: 20rpx;">
			<view class="" style="margin: 20rpx 0rpx;">
				2024-10-26 14:19
			</view>
			<view class="">
				<view class="commodityBox" v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
					<image class="image" :src="item.img" mode=""></image>
					<view class="rightIntroduce">
						<p class="title">{{ item.title }}</p>
						<p class="introduce">{{ item.introduce }}</p>
						<p>
							<view class="label">
								{{ item.label }}
							</view>
						</p>
						<p class="money">
							<text style="font-size: 32rpx;">￥{{ item.money }}</text>
							<text style="display: inline-block; width: 40rpx;"></text>
							<!-- <text style="font-size: 32rpx;">{{ item.money02 }}/</text>疗程 -->
						</p>
						<!-- <image class="addShopping" src="../../../static/images/shoppingIcon.png"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
			<view class='pictrue'>
				<image src='@/static/images/noShopper.png'></image>
			</view>
			<recommend :hostProduct="hostProduct"></recommend>
		</view>
	</view>
</template>

<script>
	import {
		getProductslist,
		getProductHot
	} from '@/api/store.js';
	import recommend from '@/components/recommend';
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js'
	export default {
		computed: mapGetters(['uid']),
		components: {
			recommend
		},
		data() {
			return {
				productList: [{
					id: "0",
					img: '../../../static/homeImg/home_img23.png',
					title: "品味生活馆健康馆古法中式纯手法颈椎保养",
					introduce: '穴位按摩、筋脉疏通、全身放松、释放身心',
					label: '30分钟',
					money: "128.0",
					money02: "680.0"
				}],
				is_switch: true,
				where: {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 20,
					cid: 0,
				},
				price: 0,
				stock: 0,
				nows: false,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				title: '',
				hostProduct: [],
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false
			};
		},
		onLoad: function(options) {
			this.$set(this.where, 'cid', options.cid || 0);
			this.title = options.title || '';
			this.$set(this.where, 'keyword', options.searchValue || '');
		},
		methods: {
			// 去详情页
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			if (this.productList.length > 0) {
				this.get_product_list();
			} else {
				this.get_host_product();
			}

		}
	}
</script>

<style scoped lang="scss">
	.commodityBox {
		width: 702rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		// margin: 20rpx;
		padding: 16rpx 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;

		.image {
			width: 158rpx;
			height: 158rpx;
			border-radius: 12rpx;
		}

		.rightIntroduce {
			width: 480rpx;
			height: 194rpx;
			margin-left: 20rpx;

			.title {
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 34rpx;
			}

			.introduce {
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin: 8rpx 0rpx;
			}
			.label {
				width: 90rpx;
				height: 30rpx;
				background: #F0F0F0;
				border-radius: 15rpx;
				font-weight: 400;
				font-size: 18rpx;
				color: #999999;
				line-height: 30rpx;
				text-align: center;
				margin: 10rpx 10rpx 10rpx 0rpx;
			}

			.money {
				font-weight: 500;
				font-size: 28rpx;
				color: #EF1010;
			}

			.addShopping {
				width: 48rpx;
				height: 48rpx;
				float: right;
				margin-top: -40rpx;
			}
		}
	}

	.iconfont {
		color: #fff;
	}

	.listBox {
		padding: 20px 15px;
		margin-top: 154rpx;
	}

	.productList .search {
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.productList .search .input {
		// width: 640rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.productList .search .input input {
		/* #ifdef H5 */
		width: 528rpx;
		/* #endif */
		/* #ifndef H5 */
		width: 548rpx;
		/* #endif */
		height: 100%;
		font-size: 26rpx;
	}

	.productList .search .input .placeholder {
		color: #999;
	}

	.productList .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productList .search .icon-pailie,
	.productList .search .icon-tupianpailie {
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.productList .nav {
		height: 86rpx;
		color: #454545;
		position: fixed;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		margin-top: 86rpx;
		top: 0;
		z-index: 9;
	}

	.productList .nav .item {
		width: 25%;
		text-align: center;
	}

	.productList .nav .item.font-color {
		font-weight: bold;
	}

	.productList .nav .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.productList .list {
		padding: 0 30rpx;
		margin-top: 192rpx;

	}

	.productList .list.on {
		border-radius: 14rpx;
		margin-top: 0 !important;
		background-color: #fff;
		padding: 40rpx 0 0 0;
		// margin: 20rpx 0;
		// background-color: #fff;
	}

	.productList .list .item {
		width: 335rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		padding: 0 24rpx 50rpx 24rpx;
		margin: 0;
		border-radius: 14rpx;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 335rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 18rpx 20rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text.on {
		width: 456rpx;
		padding: 0 0 0 20rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-bottom: 30rpx;
		margin-top: 172rpx;
	}
</style>